<template>
  <div class="my-pagination">
    <el-pagination class="y-gap-4 !y-pb-2 y-flex y-flex-wrap lg:y-justify-end" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currPage" :page-sizes="comPageSizes" :page-size.sync="comPageSize" layout="total, prev, next, jumper, pager, sizes" :total="total">
      <slot></slot>
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 0,
    },
    value: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 15,
    },
    pageSizes: {
      type: Array,
      default: () => [15, 50, 100, 200, 300],
    },
  },
  name: "yyPagination",
  data() {
    return {};
  },
  computed: {
    currPage: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
    comPageSizes () {
      const defaultPageSizes = this.pageSizes;
      if (defaultPageSizes.includes(this.pageSize)) {
        return defaultPageSizes;
      }
      return [this.pageSize, ...defaultPageSizes]
    },
    comPageSize: {
      get() {
        return this.pageSize;
      },
      set(val) {
        this.$emit("update:pageSize", val);
      },
    },
  },
  methods: {
    handleSizeChange(val) {
      this.comPageSize = val;
      this.currPage = 1;
      this.$nextTick(() => {
        // console.log(`每页 ${val}条 / ${this.currPage} 页`);
        this.$emit("pageChange");
      });
    },
    handleCurrentChange() {
      // console.log(`当前页: ${this.currPage}页，/ ${this.comPageSize}条`);
      this.$emit("pageChange");
    },
  },
};
</script>

<style lang="scss" scoped>
.my-pagination {
  ::v-deep {
    .el-pagination {
      padding: 0;
      &:before {
        content: "";
        display: none;
      }
      .el-pager {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        .number {
          margin: 0;
        }
      }
    }

    .el-pagination > * {
      margin: 0 !important;
    }

    .el-select .el-input {
      margin: 0;
    }
  }
}
</style>